<script setup>
  // 核心功能:  表格项能够根据columnList自动渲染
  defineProps({
    // 表格数据
    data: {
      type: Array,
      default: () => []
    },
    // 加载状态
    loading: {
      type: Boolean,
      default: false
    },
    // 表格项配置
    // type 渲染类型  prop 渲染字段  label 渲染标题 width 宽度
    // { type: 'text', prop: 'nickname', label: '呢称' },
    columnList: {
      type: Array,
      default: () => []
    },
    highlight: {
      type: Boolean,
      default: false
    }
  })

  defineEmits(['row-click'])
</script>

<template>
  <div class="table-view">
    <el-table :data="data" :highlight-current-row="highlight" stripe v-loading="loading" @row-click="(row, column, event) => $emit('row-click', row, column, event)">
      <el-table-column v-for="(item, index) in columnList" :key="index" :prop="item.prop" :label="item.label" :width="item.width">
        <template #default="{ row }">
          <!-- 文本类型 -->
          <span v-if="item.type === 'text' || !item.type">
            <!-- 判断是否为有格式化的字段 -->
            {{ item.format && typeof item.format === 'function' ? item.format(row, index) : row[item.prop] }}
          </span>

          <!-- 图片类型 -->
          <el-image v-if="item.type === 'image'" :src="row[item.prop]" style="width: 48px; height: 48px" fit="cover" :preview-src-list="[row[item.prop]]" preview-teleported />

          <!-- 标签类型 -->
          <el-tag v-if="item.type === 'tag'" type="primary" effect="dark" round>{{ row[item.prop] }}</el-tag>

          <!-- 插槽类型[作用域插槽] -->
          <slot v-if="item.type === 'slot'" :name="item.prop || 'opera'" :row="row" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped lang="scss"></style>
